<template>
  <div style="display: flex;">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      @select="handleMenuSelect"
    >
      <el-menu-item-group title="接口授权">
      <el-menu-item index="0-1">授权管理</el-menu-item>
      </el-menu-item-group>
      <el-menu-item-group title="电表设置">
        <el-menu-item index="1-1">后付费电表设置</el-menu-item>
        <el-menu-item index="1-2">预付费电表设置</el-menu-item>
        <el-menu-item index="1-3">电表余额不足通知</el-menu-item>
<!--        <el-menu-item index="1-4">公区电表分摊设置</el-menu-item>-->
        <el-menu-item index="1-5">电费单价设置</el-menu-item>
      </el-menu-item-group>
<!--      <el-menu-item-group title="水表设置">-->
<!--        <el-menu-item index="2-1">水量余额不足通知</el-menu-item>-->
<!--        <el-menu-item index="2-2">预付费水表设置</el-menu-item>-->
<!--        <el-menu-item index="2-3">公区水表分摊设置</el-menu-item>-->
<!--        <el-menu-item index="2-4">水费单价设置</el-menu-item>-->
<!--      </el-menu-item-group>-->
<!--      <el-menu-item-group title="接入第三方设备">-->
<!--        <el-menu-item index="3-1">设备账号管理</el-menu-item>-->
<!--      </el-menu-item-group>-->
    </el-menu>
    <div style="flex: 1;">
      <Auth v-if="activeIndex === '0-1'" />
      <AfterPaidElectrictable v-if="activeIndex === '1-1'" />
      <PrePaidElectrictable v-if="activeIndex === '1-2'" />
      <PreElectriNotice v-if="activeIndex === '1-3'" />
      <PublicElectritable v-if="activeIndex === '1-4'" />
      <PowerRate v-if="activeIndex === '1-5'" />
      <PreWaterNotice v-if="activeIndex === '2-1'" />
      <PrePaidWaterTable v-if="activeIndex === '2-2'" />
      <PublicWatertable v-if="activeIndex === '2-3'" />
      <WaterRate v-if="activeIndex === '2-4'" />
    </div>
  </div>
</template>
<script setup name="AfterPaidElectrictable">
import Auth from './auth.vue'
import AfterPaidElectrictable from './afterPaidElectrictable.vue'
import PrePaidElectrictable from './prePaidElectrictable.vue'
import PreElectriNotice from './preElectriNotice.vue'
import PublicElectritable from './publicElectritable.vue'
import PowerRate from './powerRate.vue'
import PreWaterNotice from './preWaterNotice.vue'
import PrePaidWaterTable from './prePaidWatertable.vue'
import PublicWatertable from './publicWatertable.vue'
import WaterRate from './waterRate.vue'


const activeMenu = ref('0-1')
const activeIndex = ref('0-1')
function handleMenuSelect(index) {
  activeIndex.value = index
}
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  width: 200px;
  .el-menu-item {
    height: 40px;
    border-color: transparent;
  }
  .is-active {
    background-color: var(--el-color-primary-light-9);
    border-right: 2px solid var(--el-color-primary);
  }
}
</style>